<template>  
    <div>  
      <input type="file" @change="handleFileUpload" accept="image/*" />  
      <div v-if="imageUrl">  
        <img :src="imageUrl" alt="Uploaded Image" style="max-width: 100%;" />  
      </div>  
    </div>  
  </template>  
    
  <script setup lang="ts">  
  import { ref } from 'vue';  
    
  // 创建一个响应式变量来存储图片URL  
  const imageUrl = ref<string | null>(null);  
    
  // 处理文件上传的函数  
  function handleFileUpload(event: Event) {  
    const fileInput = event.target as HTMLInputElement;  
    if (fileInput.files && fileInput.files[0]) {  
      // 创建一个FileReader来读取文件  
      const reader = new FileReader();  
      reader.onload = (e: ProgressEvent<FileReader>) => {  
        // 当文件读取完成后，将结果设置为imageUrl的值  
        if(e.target ==null) return;
        if (e.target.result) {  
          imageUrl.value = e.target.result as string;  
        }  
      };  
      // 读取文件为DataURL  
      reader.readAsDataURL(fileInput.files[0]);  
    }  
  }  
  </script>  
    
  <style scoped>  
  /* 你的样式 */  
  img{
    width: 500px;
    height: 500px;
  }
  </style>